<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/script/echarts.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/script/jquery-3.5.1.js"></script>

</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.setOption({
        title: {
            text: '日常总费用对比'
        },
        tooltip: {},
        legend: {
            data:['总费用']
        },
        xAxis: {
            data: ["出车费用","加油费用","维修费用","规费费用","保养费用","违章费用","年检费用","保险费用"]
        },
        yAxis: {},
        series: [{
            name: '总费用',
            type: 'bar',
            data: []
        }]
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.showLoading();

    var data = [];

        $.ajax({
            url:"/price/totalprice",
            type:"post",
            success:function (res) {
                data.push(res.totalPrice1);
                data.push(res.totalPrice2);
                data.push(res.totalPrice3);
                data.push(res.totalPrice4);
                data.push(res.totalPrice5);
                data.push(res.totalPrice6);
                data.push(res.totalPrice7);
                data.push(res.totalPrice8);

                myChart.hideLoading();    //隐藏加载动画

                myChart.setOption({        //加载数据图表
                    series: [{
                        name: '总费用',
                        data: data
                    }]
                });

            }
        });
</script>
</body>
</html>
